<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    
    <script type="text/javascript" charset="utf-8">
      	mui.init();
      	mui.plusReady(function(){
      		var regButton = document.getElementById("reg");
      		var loginButton = document.getElementById("login");
      		//先监听注册按钮的点击事件，然后点击后注册，然后跳转到另外的一个页面，用的是mui.openWindow事件
      		regButton.addEventListener('tap',function(){
      			mui.openWindow({
      				url:'./reg.html',
      				id : 'reg',
      				timeout: 15000,
      				show : {//显示方式
      					ainShow :'pop-in'//滑动
      				}
      			})
      		})
      		//登陆按钮的点击事件
      		loginButton.addEventListener('tap',function(){
      			var account = document.getElementById("account");
      			var mpassword = document.getElementById("mpassword");
      			mui.ajax('http://api.jiunixing.com/appNews/index.php?c=Account&a=login',{
      				//发送的数据，必须写成这种形式，因为要请求的接口要求的就是这种形式
      				data:{
      					account:account.value,
      					password : mpassword.value
      				},
      				type:'post',
      				dataType : 'json',
      				timeout:15000,
      				success:function(data){
      					//根据服务器返回过来的值，判断是什么显示的信息
      					plus.ui.toast(data.msg);
      					//登陆成功
      					if(data.status == 1){
      						//跳转到列表页
      						mui.openWindow({
      							//要跳转的页面
      							url : './list.html',
      							//每一个id都不能相同
      							id : 'list',
      							timeout : 15000,
      							show:{
      								aniShow:'pop-in'//滑动
      							}
      						})
      					}
      				},
      				error:function(){
      					plus.ui.toast('网络不同或者错误');
      				}
      			})
      		})
      	})

    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
	    <h1 class="mui-title">标题</h1>
	</header>
	<div class="mui-content">
		<form class="mui-input-group">
		    <div class="mui-input-row">
		        <label>账号:</label>
		        <input type="text" class="mui-input-clear" placeholder="请输入账号"id="account">
		    </div>
		    <div class="mui-input-row">
		        <label>密码:</label>
		        <input type="password" class="mui-input-clear" placeholder="请输入密码"id="mpassword">
		    </div>
		    <div class="mui-content-padded" align="center">
	        	<button type="button" class="mui-btn mui-btn-blue mui-btn-block" style="height: 30px;line-height: 0px;" id="login">登陆</button>
	        	<a href="javascript:;" id="reg" class="mui-btn mui-btn-success mui-btn-block"style="height: 30px;line-height: 0px;cursor: pointer;">注册账号</a>
	    	</div>
		</form>
	</div>
</body>
</html>